import React from 'react';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { MenuItemModel } from '@/type/menu_type';
import { SortOrder } from 'antd/lib/table/interface';
import {
  deleteMenuListApi,
  getMenuListApi,
  updateMenuList,
  updateMenuStatusApi,
} from '@/service/menu_api';
import { log, numberToBool } from '@/utils/app_fun';
import { Switch, Tag } from 'antd';
import { message } from 'antd';
import { UpdateShareUrlStatusApi } from '@/service/share_url_api';

const columns: ProColumns<MenuItemModel>[] = [
  {
    title: '栏目id',
    dataIndex: 'id',
    key: 'id',
    search: false,
    editable: false,
  },
  {
    title: '栏目父级id',
    dataIndex: 'parent_id',
    render: (dom, item, index) => {
      if (item.parent_id === -1) {
        return <Tag color="pink">顶级</Tag>;
      }
      return dom;
    },
    search: false,
    editable: false,
  },
  {
    title: '栏目名称',
    dataIndex: 'menu_name',
  },
  {
    title: '栏目路由',
    dataIndex: 'menu_path',
  },
  {
    title: '栏目图标',
    dataIndex: 'icon',
    search: false,
  },
  {
    title: '操作',
    valueType: 'option',
    render: (text, record, _, action) => [
      <a
        key={'editable_' + `${record.id}`}
        onClick={(date) => {
          action.startEditable?.(record.id);
        }}
      >
        编辑
      </a>,
      <a
        target="_blank"
        key={'delete_' + `${record.id}`}
        onClick={() => {
          deleteMenu(record.id, action);
        }}
      >
        删除
      </a>,
      <Switch
        key={record.id}
        checkedChildren="显示"
        unCheckedChildren="隐藏"
        defaultChecked={numberToBool(record.status)}
        onChange={async (checked, event) => {
          const success = await updateMenuStatusApi({
            id: record.id,
            status: checked,
          });
          if (success) {
            message.success('更新成功');
          } else {
            message.error('更新失败');
          }
        }}
      />,
    ],
  },
];

const deleteMenu = async (id: number, action: any) => {
  const success = await deleteMenuListApi(id);
  if (success) {
    action.reload();
    message.success('删除成功');
  } else {
    message.error('删除失败');
  }
};

export default () => {
  const getMenuList = async (
    params: {
      pageSize?: number;
      current?: number;
      keyword?: string;
    },
    sort: {
      [key: string]: SortOrder;
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) => {
    const model = await getMenuListApi({
      page: params.current ?? 1,
      limit: params.pageSize ?? 10,
      // "menu_name": params["a"].
    });
    if (model.success) {
      return {
        success: true,
        data: model.data!.data.lists,
        total: model.data!.data.total,
      };
    }
    return {
      data: [],
      success: false,
    };
  };

  return (
    <ProTable<MenuItemModel>
      columns={columns}
      rowKey="id"
      request={getMenuList}
      editable={{
        onSave: async (key, row) => {
          console.log(row);
          const success = await updateMenuList(row);
          if (success) {
            message.success('更新成功');
          } else {
            message.error('更新失败');
          }
        },
      }}
      pagination={{ pageSize: 5 }}
    />
  );
};
